<template>
  <el-scrollbar v-loading="loading" class="view-box">
    <pdf :src="fileurl" :page="currPage" @num-pages="pageCount = $event" @page-loaded="pageLoaded" />
    <div class="pageButton">
      <el-button size="mini" round @click="changePage(0)">上一页</el-button>
      <span> {{ currPage }} / {{ pageCount }} </span>
      <el-button size="mini" round @click="changePage(1)">下一页</el-button>
    </div>
  </el-scrollbar>
</template>

<script>
import Pdf from 'vue-pdf';
export default {
  components: {
    Pdf
  },
  props: {
    file: {
      type: Object,
      required: true
    },
    preview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currPage: 1,
      pageCount: 1,
      loading: true
    };
  },
  computed: {
    fileurl() {
      return this.file ? this.file.playurl : '';
    }
  },
  methods: {
    // 翻页
    changePage(val) {
      if (val === 0 && this.currPage > 1) {
        this.currPage--;
      }
      if (val === 1 && this.currPage < this.pageCount) {
        this.currPage++;
      }
    },
    pageLoaded(num) {
      this.currPage = num
      this.loading = false
    }
  }
};
</script>

<style scoped>
.view-box {
  width: 100%;
  height: 500px;
}
.pageButton {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.pageButton .el-button {
  margin: 0 10px;
}
</style>
